<template>
  <div>
    <div class="inner-shadow-ring item" :style="`background-image: ${avaImg};`">
      <img :src="avaImg" alt="点我查看个人资料" />
      <span>{{ text }}</span>
    </div>
    <!-- <div class="inner-shadow-ring-2 item"></div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useStore } from '@/store'

const props = withDefaults(
  defineProps<{
    img?: string
    radius?: number
    text?: string
  }>(), {
}
)

const text = props.text
const avaImg = props.img
</script>
<style lang="less" scoped>
.item {
  margin-left: 1702px;
  position: fixed;
  width: 50px;
  height: 50px;
  background: #ecf0f3;
  margin-top: 6px;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 7px 0px;
  }
  span {
    text-align: center;
    display: block;
    margin-top: -8px;
  }
}
.inner-shadow-ring {
  border-radius: 100%;
  box-shadow: 9px 9px 15px #d1d9e6, -9px -9px 15px #fff;
}

.inner-shadow-ring:before {
  content: "";
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  border-radius: 100%;
  background: #ecf0f3;
  background-position: 50% 50%;
  background-size: 100% 100%;
  box-shadow: inset 9px 9px 15px #d1d9e6, inset -9px -9px 15px #fff;
}
.inner-shadow-ring-2 {
  border-radius: 100%;
  box-shadow: inset 9px 9px 15px #d1d9e6, inset -9px -9px 15px #fff;
}

.inner-shadow-ring-2:before {
  content: "";
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  border-radius: 100%;
  background: #ecf0f3;
  background-image: url(../../public/head.jpg);
  background-position: 50% 50%;
  background-size: 100% 100%;
  box-shadow: 9px 9px 15px #d1d9e6, -9px -9px 15px rgb(247, 247, 247);
  /* box-shadow: inset 3px 3px 15px #d1d9e6, inset -3px -3px 15px #fff; */
}
</style>
